
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<title>imgAreaSelect jQuery plugin - Examples - odyniec.net</title>


<meta name="keywords"
	content="imgareaselect,javascript,jquery,plugin,image,area,select,crop,cropper,examples,Michal Wojciechowski,odyniec" />

<link rel="shortcut icon" href="/favicon.ico" />
<link rel="stylesheet" type="text/css"
	href="http://odyniec.net//css/google-code-prettify/prettify.css" />


<link rel="stylesheet" type="text/css"
	href="http://odyniec.net/css/main.css" />




<link rel="stylesheet" type="text/css"
	href="http://odyniec.net/themes/hench_blue/css/main.css" />



<link rel="stylesheet" type="text/css" href="css/index.css" />



<link rel="stylesheet" type="text/css"
	href="http://odyniec.net/css/imgareaselect-default.css" />



<link rel="stylesheet" type="text/css" href="css/examples.css" />


<script type="text/javascript"
	src="http://odyniec.net//js/google-code-prettify/prettify.js"></script>

</head>

<body onload="prettyPrint();">

	<div id="root">


		<div id="content" class="container">
			<script type="text/javascript" src="../jquery-1.7.2.js"></script>
			<script type="text/javascript" src="jquery.imgareaselect.pack.js"></script>
			<script type="text/javascript">
				function preview(img, selection) {
					var scaleX = 100 / (selection.width || 1);
					var scaleY = 100 / (selection.height || 1);

					$('#ferret + div > img').css(
							{
								width : Math.round(scaleX * 400) + 'px',
								height : Math.round(scaleY * 300) + 'px',
								marginLeft : '-'
										+ Math.round(scaleX * selection.x1)
										+ 'px',
								marginTop : '-'
										+ Math.round(scaleY * selection.y1)
										+ 'px'
							});
				}
				
				
				$(document)
				.ready(
						function() {
							$(
									'<div><img src="img/ferret.jpg" style="position: relative;" /><div>')
									.css({
										float : 'right',
										position : 'relative',
										overflow : 'hidden',
										width : '100px',
										height : '100px'
									}).insertAfter($('#ferret'));

							$('#ferret').imgAreaSelect({
								aspectRatio : '1:1',
								onSelectChange : preview
							});
						});
				
				
			</script>

			<div class="container">

				<a class="button home" href=".">imgAreaSelect Home</a>
				<h1>imgAreaSelect Examples</h1>
			</div>




			<div class="container">
				<p>
					<img id="ferret" src="img/ferret.jpg"
						alt="It's coming right for us!" title="It's coming right for us!"
						style="float: left; margin-right: 10px;" />
				</p>
			</div>

		</div>


	</div>
	<!-- /#root -->
</body>
</html>

